<template>
	<div class="content">
		<div style="background-color: white;height: auto;width: 100%;">
			<div style="height: 20px;width: 100%;"></div>
			<div class="row">
				<div style="font-weight: bold;font-size: 32upx;">快递运费：</div>
				<div style="font-weight: bold;font-size: 50upx;">{{order.price}}元</div>
			</div>
			<div class="row ">
				<div style="font-weight: bold;font-size: 32upx;">状态：</div>
				<div style="font-size: 32upx;margin-left: 5px;">{{order.dictStatusName}}</div>
			</div>
			<div class="row " v-if="order.trackNumber!=''&&order.trackNumber!=null">
				<div style="font-weight: bold;font-size: 32upx;">运单号：</div>
				<div style="font-size: 32upx;margin-left: 5px;">{{order.trackNumber}}</div>
			</div>
			<div class="line"></div>
		</div>

		<div class="detail-list">
			<div style="height: 1px;width: 100%;"></div>
			<div class="row-item">
				<div class="bengin-cel">收件人姓名:</div>
				<div class="end-cel">{{order.receiveName}}</div>
			</div>
			<div class="row-item">
				<div class="bengin-cel">收件人电话号:</div>
				<div class="end-cel">{{order.phoneNumber}}</div>
			</div>

			<div class="row-item">
				<div class="bengin-cel">创建时间:</div>
				<div class="end-cel">{{order.insertTimeTime}}</div>
			</div>
			<div class="line"></div>
			<div class="row-item">
				<div class="bengin-cel">
					<button @click="ok" class="mini-btn" type="primary" size="mini" v-if="order.dictStatus=='NOTPROCESSED'" >修改收货地址</button>
				</div>
			</div>
			<div class="row-item" >
				<div class="bengin-cel">收货地址:</div>
			</div>
			<div class="row-item">
				{{order.address}}
			</div>
			<div class="row-item">
				<div class="bengin-cel">卡号:</div>
				<div class="end-cel">{{order.amount}}</div>
			</div>
			<div class="row-item">
				{{order.cardNumberVOList.join(",")}}
			</div>
			<div class="row-item">
				<div class="bengin-cel">备注:</div>
			</div>
			<div class="row-item">
				{{order.remark}}
			</div>
			<div class="line"></div>
		</div>
		
		<uni-popup ref="popup" type="bottom" class="bottom-popup">
		
			<div class="address-card">
		
				<div class="select-top ">
					<span class="font-1">填写换货地址</span>
					<div class="del-jiao" @click="closepop"></div>
					<i class="ali-icon card-del" @click="closepop">&#xe657;</i>
				</div>
				<input v-model="receiveName" class="uni-input input-style" focus placeholder="收件人" />
				<input v-model="phoneNumber " class="uni-input input-style" placeholder="电话" />
				<div class="input-style uni-input sheng-shi-qu" @click="$refs.simpleAddress.open()">
					{{area}}
				</div>
				<input v-model="address" class="uni-input input-style" placeholder="详细地址" />
				<button type="primary"  style="width:87%;" @click="acquire" :disabled="disabled">确定</button>
			</div>
		</uni-popup>
		
		<simple-address ref="simpleAddress" @onConfirm="onConfirm" themeColor='#007AFF'>
		
		</simple-address>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				getExpressinformationUrl: '/expressinformation/getExpressinformation',
				saveExpressinformation:'/expressinformation/save/recheck',
				order: {
					cardNumberVOList:[],
					price: "",
					receiveName: "",
					phoneNumber: "",
					dictStatus:"",
					dictStatusName: "",
					address:"",
					remark: "",
					"insertTimeTime": "",
					trackNumber:""
				},
				area:"省/市/区",
				phoneNumber:"",
				receiveName:"",
				address:"",
				id: "",
				disabled: false,
				pagekey: '',
			}
		},
		async onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.id = option.id
			console.log(option.id)
			if(this.id==undefined){
				uni.navigateTo({
					url: '/pages/changeLog/changeLog'
				})
			}
			this.initData()
		},
		methods:{
			async initData(){
				let a = await this.$req.crm(this.getExpressinformationUrl,{id:this.id})
				let list = a.data.cardNumberVOList.map(v=>{
					return v.oldCardNumber
				})
				a.data.cardNumberVOList = list
				this.order=a.data
			},
			gotoDetail(id){
				uni.navigateTo({
					url: '/pages/tabbar/rechargeRecord/orderDetail?id='+id 
				});
			},
			onConfirm(e) {
				this.area= e.label;
			},
			closepop(){
				this.$refs.popup.close()
			},
			async ok() {
				this.$refs.popup.open();
				this.pagekey = await this.$getPageKey();
			},
			selectCheckAll(e) {
				if (e.detail.value.length == 0) {
					this.items.forEach(v => {
						v.checked = false
					})
				} else {
					this.items.forEach(v => {
						v.checked = true
					})
				}
			},
			selectCard(e) {
				let values = e.detail.value
				if (values.length == this.items.length) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
				this.ids = values
			
			},
			addressCard() {
			
			},
			async acquire(){
				if(this.receiveName==""||this.receiveName.length>5){
					uni.showToast({
						icon: "none",
						title: "请输入正确的收件人！",
						duration: 3000
					});
					return 
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号！",
						duration: 3000
					});
					return 
				}
					
				if(this.area=="省/市/区"){
					uni.showToast({
						icon: "none",
						title: "请选择省市区！",
						duration: 3000
					});
					return 
				}
			
			
				if(this.address==""||this.address.length>30){
					uni.showToast({
						icon: "none",
						title: "请输入正确的详细地址！(30位以内)",
						duration: 3000
					});
					return 
				}
				this.disabled = true;
				await this.$req.crm(this.saveExpressinformation,{
					id:this.id,
					address:this.area+this.address,
					phoneNumber:this.phoneNumber,
					receiveName:this.receiveName,
					pagekey: this.pagekey
				}).then(v=>{
					this.initData()
					this.closepop()
					uni.showToast({
						icon: "none",
						title: "修改成功！",
						duration: 3000
					});
					this.disabled = false;
				}).catch(err=>{
					this.disabled = false;
				})
				this.pagekey = await this.$getPagekey();
				
			}
		}

	}
</script>

<style lang="scss">
	$left-10 :18px;

	.content {
		background-color: $uni-bg-color-grey;
		min-height: calc(100vh - 47px);
	}


	.row {
		display: flex;
		justify-content: space-between;
		margin-left: $left-10;
		margin-right: $left-10;
		align-items: center;
		margin-top: 10px;

	}

	.line {
		width: 100%;
		border-bottom: 10px solid #f5f5f5;
		margin-top: 20px;
	}

	.detail-list {
		background-color: white;
		width: 100%;
		height: auto;
	}

	.row-item {
		padding-left: $left-10;
		padding-right: $left-10;
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		font-size: 32upx;

		.bengin-cel {
			color: #cacaca
		}
	}
	.address-card {
		background-color: white;
		width: 100%;
		height: 350px;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	.input-style {
		border: 1px solid $theme-color;
		width: 80%;
		margin: 10px auto;
		border-radius: 10px;
		height: 13px;
		display: flex;
		align-items: center;
	}
	
	.select-top {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: $theme-color;
		height: 80upx;
		width: 100%;
		padding-top: 20upx;
		color: white;
	
		.font-1 {
	
			margin-left: $left-10;
			font-size: large;
		}
	
		.font-2 {
			margin-top: 0px;
			font-size: small;
			margin-left: $left-10;
		}
	}
	.sheng-shi-qu{
		height: 20px;
		text-decoration:underline;
		color: $theme-color
	}
</style>
